<template>
    <div class="body">
        <div class="logo">
            <div>
                <img src="@/assets/红细胞.png" class="logoImage">
            </div>
            <div class="logoText">红细胞工作室</div>
        </div>
        <div class="loginDiv">
            <div class="welcome"> 欢迎登录！</div>
            <div class="input-group">
                <input type="text" placeholder="工号" class="input-field" v-model="UserList.username" @input="logData"  />
                <input type="password" placeholder="密码" class="input-field" v-model="UserList.password"  @input="logData" />
            </div>
            <div class="remember-me">
                <div class="checkbox-container">
                    <input type="checkbox" id="remember" class="checkbox" v-model="rememberMe">
                    <label for="remember" class="checkbox-label">记住我</label>
                </div>
                <button class="submit-btn" @click=isLogin >登录</button>
            </div>
            <div class="sign">
                <a>还没有账号？</a>
                <a style="color: #007aff; cursor: pointer;" @mouseover="hover = true" @mouseleave="hover = false"
                    @click="router.push('/sign')" :style="{ color: hover ? 'white' : '#007aff' }">
                    去注册 >>
                </a>

            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import {loginData} from './login';
const {UserList ,isLogin,hover,
    rememberMe,logData} = loginData();

</script>

<style scoped>
@import '../login/login.scss';
</style>